/*
 * show all local storage contents in table
 */
( function( window, undefined ) {

    function showlocalStorageAsTable() {

        var table = document.createElement("table");
        table.className = "weui_table";
        table.style.maxWidth = '100vw';

        var th = document.createElement('th');
        var title = document.createElement('td')
        title.innerHTML = 'localStorage';
        th.appendChild(title);
        table.appendChild(th);

        var keys = Object.keys(localStorage);
        for (var i = 0; i < keys.length; i++) {

            var key = keys[i];
            var value = localStorage.getItem(key);

            var tr = document.createElement('tr');

            var td = document.createElement('td');
            td.style.width='20vw'
            td.innerHTML = key;
            tr.appendChild(td);

            var td = document.createElement('td');
            td.style.width='80vw'
            td.innerHTML = `<div overflow-wrap:break-word">${value}</div>`;
            tr.appendChild(td);

            table.appendChild(tr)
        }

        //document.getElementById("showLocal").appendChild(table);
        document.querySelector(".weui_text_area").appendChild(table);

    } // the content will exceeds screen

    function showLocalStroageAsText() {
        var title = document.createElement("h3");
        title.innerHTML="localStorage"
        document.getElementById("showLocal").appendChild(title);
        var keys = Object.keys(localStorage);
        for (var i = 0; i < keys.length; i++) {
            var key = keys[i];
            var value = localStorage.getItem(key);
            var kvs = document.createElement("p");
            kvs.innerHTML = `<strong>${key}</strong> ${value}`
            document.getElementById("showLocal").appendChild(kvs);
        }
    }

    showLocalStroageAsText();

})( window );
